<template>
  <div>
    <egrid class="egrid"
           stripe
           border
           maxHeight="500"
           column-type="selection"
           :data="data"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler"
           @selection-change="selectionChange">
    </egrid>
    <TabList :tabData="data"
             class="table-header-gray"
             :columns="columns"></TabList>
  </div>

</template>

<script>
import Vue from 'vue'

// 操作按钮
var Btn = {
  template: `<button @click="todo">{{ row._edit ? 'Done' : 'Edit' }}</button>`,
  props: ['row'],
  methods: {
    todo () {
      this.$emit('row-editor', this.row)
      this.$set(this.row, '_edit', !this.row._edit)
    }
  }
}

// 单元格的组件
var Editor = {
  template:
    `<div>
    <input
      v-show="row._edit" type="text"
      v-model="row[col.prop]">
    <span v-show="!row._edit">{{ text }}</span>
  </div>`,
  props: ['row', 'col'],
  computed: {
    text () {
      return this.row[this.col.prop]
    }
  }
}
export default {
  data () {
    return {
      data: [
        {
          date: '2016-05-03',
          name: null,
          province: null,
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '省份', prop: 'province' },
        { label: '市区', prop: 'city' },
        { label: '地址', prop: 'address' },
        { label: '邮编', prop: 'zip' }
      ],
      // columnsProps 用于定义所有 columns 公共的属性
      columnsProps: {
        width: 120,
        sortable: true,
        // 定义表格列如何渲染
        component: Editor
      },
      // columnsSchema 可以用来单独定义 columns 的某一列
      // 这里的设置会覆盖 columnProps 的配置属性
      columnsSchema: {
        // '日期': { fixed: 'left' },
        '地址': {
          width: 280,
          // propsHandler 可用于转换传给自定义组件的 props
          // 默认附加给自定组件的 props 为 :row="row" :col="col" :column="column"
          propsHandler ({ col, row }) {
            return { address: row[col.prop] }
          },
          component: Vue.extend({
            props: ['address'],
            render (h) {
              return h('span', {
                style: { color: '#20A0FF' }
              }, this.address)
            }
          })
        }
      }
    }
  },
  methods: {
    columnsHandler (cols) {
      return cols.concat({
        label: '操作',
        fixed: 'right',
        width: 100,
        component: Btn,
        listeners: {
          'row-editor' (row) {
            console.log('row-editor', row)
          }
        }
      })
    },

    selectionChange (rows) {
      console.log(rows)
    }
  }
}
</script>
